<template>
  <div>
    <div class="wrapper">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item title="交际用语" name="1">
          <div class="title">(5小题,每小题3分,共15分)</div>
          <div class="button" @click="handelRouter('jiaojiyongyv','jiaojiyongyv')">高频考题</div>
          <div class="button" @click="handelRouter('jiaojiyongyv2','jiaojiyongyv')">低频考题</div>
        </el-collapse-item>
        <el-collapse-item title="阅读理解" name="2">
          <div class="title">(10小题,每小题2分,共20分)</div>
          <div class="button" @click="handelRouter('yuedu1','yuedu1')">阅读理解(一)</div>
          <div class="button" @click="handelRouter('yuedu2','yuedu2')">阅读理解(二)</div>
        </el-collapse-item>
        <el-collapse-item title="词汇与结构" name="3">
          <div class="title">(5小题,每小题2分,共10分)</div>
          <div class="button" @click="handelRouter('cihuei','cihuei')">词汇与结构</div>
        </el-collapse-item>
        <el-collapse-item title="完形填空" name="4">
          <div class="title">(5小题,每小题3分,共15分)</div>
          <div class="button" @click="handelRouter('wanxing','wanxing')">完形填空</div>
        </el-collapse-item>
        <el-collapse-item title="英译汉" name="5">
          <div class="title">(6小题,每小题3分,共15分)</div>
          <div class="button" @click="handelRouter('fanyi','fanyi')">英译汉</div>
        </el-collapse-item>
        <el-collapse-item title="写作" name="6">
          <div class="title">(10分)</div>
        </el-collapse-item>
      </el-collapse>
    </div>

  </div>
  
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      activeName:"1"
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {},
  methods: {
    handelRouter(url,routerName){
      sessionStorage.setItem("url",url);
      this.$router.push({name:routerName})
    }
  },
};
</script>
<style scoped>
.wrapper{
  padding: 10px;
}
.title{
  text-align: left;
}
.button{
  width: 300px;
  border-bottom: 1px solid #eee;
  padding: 10px;
  text-align: left;
  cursor: pointer;
}
.button:hover{
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

</style>